<script setup>
import { ElMessage } from 'element-plus'
import { Search, House, Edit, Operation, User } from '@element-plus/icons-vue'
import { computed, inject, ref, watchEffect } from "vue"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import logo from "../../class/img/logo_s.png"
// 引入 路由
const router = useRouter()
// 引入 VueX 操作
const commit = useStore()
// 创建 store 
const store = inject('store')
// 搜索显隐
const BlogSearch = ref(true)
const SearchValue = ref('')
// 监控路由地址
watchEffect(() => {
  BlogSearch.value = router.currentRoute.value.name != "BlogSearch"
})
// 选择按钮高亮
const activeMap = {
    index: 2,
    BlogPublishing: 3,
    user: 4,
    login: 5_1,
    register: 5_2,
    BlogBost: 6_1,
    ChangePassword: 6_1,
    ChangeEmail: 6_1,
    ModifyData: 6_1
}
// 选择按钮高亮
const active = computed(() => activeMap[router.currentRoute.value.name])
// 同步用户信息
const user = computed(() => store.state.user)
// 退出登录
function outUser() {
    commit.commit("outUser")
     router.push("/login")
}
// 页面跳转
function SwitchPage(key) {
    const pages = {
        index: () => { router.push({ name: `index` })},
        Search: () => {
            if(SearchValue.value && SearchValue.value.trim() !== "") {
                  return router.resolve({ name: `BlogSearch`, params: { type: "title", value: SearchValue.value } }).href
            } else {
                ElMessage({
                    type: "info",
                    message: "搜索内容不得为空",
                    offset: 50
                })
            }
        },
        user: () =>  { return router.resolve({ name: `user` }).href},
        login: () =>  { router.push({ name: `login` })},
        register: () =>  { router.push({ name: `register` })},
        BlogBost: () =>  { router.push({ name: `BlogBost`})},
        BlogPublishing: () =>  { return router.resolve({ name: 'BlogPublishing', params: { BlogId: false } }).href},
        followed: () =>  { router.push({ name: 'followed' })},
        homePage: () =>  { router.push({ name: 'homePage', params: { userID:store.state.user.id } })}
    }
    if(pages[key]())
    window.open(pages[key](), '_blank')
}
</script>

<template>
    <el-menu :default-active="String(active)" active-text-color="#5D9FF8" mode="horizontal" :ellipsis="false">
        <el-menu-item index="1">
            <el-image style="width: 60px; height: 50px" :src="logo" fit="contain" />
        </el-menu-item>
        <div class="flex-grow" />
        <div v-show="BlogSearch" class="Search">
            <input class="input" v-model="SearchValue" type="text">
            <el-button @click="SwitchPage('Search')">
                搜索
                <el-icon>
                    <Search />
                </el-icon>
            </el-button>
        </div>
        <el-menu-item @click="SwitchPage('index')" :index="2"> 
            <el-text>
                <el-icon>
                    <House />
                </el-icon>
                首页
            </el-text>
        </el-menu-item>
        <el-menu-item  @click="SwitchPage('BlogPublishing')" v-if="user.id"
            :index="3">
            <el-text type="success" >
                <el-icon>
                    <Edit />
                </el-icon>
                发布
            </el-text>
            </el-menu-item>
        <el-menu-item v-if="user.id == 1" @click="SwitchPage('user')" :index="4">
            <el-text>
                <el-icon>
                    <Operation />
                </el-icon>
                后台管理
            </el-text>
            </el-menu-item>
        <el-sub-menu v-if="!user.id" :index="5">
            <template #title>
                <el-text>
                <el-icon>
                    <House />
                </el-icon>
                登录/注册
            </el-text>
        </template>
            <el-menu-item @click="SwitchPage('login')" :index="5_1">登录</el-menu-item>
            <el-menu-item @click="SwitchPage('register')" :index="5_2">注册</el-menu-item>
        </el-sub-menu>
        <el-sub-menu v-if="user.id" :index="6">
            <template #title>
                <el-text>
                    <el-icon>
                        <User />
                    </el-icon>
                个人中心
            </el-text>
               </template>
            <el-menu-item @click="SwitchPage('followed')" :index="6_1">关注</el-menu-item>
            <el-menu-item @click="SwitchPage('homePage')" :index="6_2">主页</el-menu-item>
            <el-menu-item @click="SwitchPage('BlogBost')" :index="6_3">管理</el-menu-item>
            <el-menu-item :index="6_4" @click="outUser()">退出</el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<style scoped>
.flex-grow {
    flex-grow: 1;
}
.Search {
    margin-right: 10px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.Search .input{
    all: initial; 
    all: unset;
    border: 3px solid  #ECF5FF;
    transition: all 0.3s;
    background-color: #ECF5FF;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
    width: 300px;
}
.Search:hover .input{
    
    background-color: white;
}
.Search .el-button{
    background-color: #ECF5FF;
    border: 0px;
    height: 40px;
    width: 80px;
    border-radius: 0px;
}

.Search .el-button .el-icon{
    margin-left: 3px;
}
</style>
